<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="radar"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['radar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
		opts: {
		  color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666"],
		  padding: [0, 0, 0, 0],
		  dataLabel: false,
		  enableScroll: false,
		  legend: {
			show: true,
			position: "top",
			lineHeight: 25
		  },
		  extra: {
			radar: {
			  gridType: "radar",
			  gridColor: "#CCCCCC",
			  gridCount: 4,  // 适配更多网格
			  opacity: 0.3,  // 增加透明度
			  max: 250,      // 增大最大值
			  labelShow: true,
			  border: true,
			  radius:70,
			}
		  }
		}
    };
  },
  onReady() {
    this.getServerData();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories: ["","","","","",""],
            series: [
              {
                name: "测试值",
                data: [90,110,165,195,187,172]
              },
            ]
          };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 500);
    },
  }
};
</script>

<style scoped>
.charts-box {
  width: 100%;
  height: 600rpx; /* 根据需求调整高度 */
}
</style>